<template>
  <el-dialog v-model="visible" title="设备充值" :close-on-click-modal="false" destroy-on-close>
    <el-row>
      <el-col :span="18">
        <el-table v-loading="loading" :data="dataList" border class="layout-table" @selection-change="selectionChange">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column prop="imei" label="设备序号" header-align="center" align="center"></el-table-column>
          <el-table-column prop="plateNo" label="设备名称" header-align="center" align="center"></el-table-column>
          <el-table-column prop="annualAmount" label="平台年费" header-align="center" align="center"></el-table-column>
          <el-table-column prop="simAnnualAmount" label="卡年费" header-align="center" align="center"></el-table-column>
          <!--        <el-table-column prop="msgId" label="平台到期时间" header-align="center" align="center"></el-table-column>-->
        </el-table>
        <el-pagination
          :current-page="data.pageNum"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="data.pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle">
        </el-pagination>
      </el-col>
      <el-col :span="6">
        <el-table size="default" class="layout-table" border empty-text="年费配置">
          <template #append>
            <el-form ref="form" :model="dataFrom" size="default" label-width="80px" style="margin: 10px">
              <el-form-item label="平台年费">
                <el-input v-model="dataFrom.amount" type="number" placeholder="请输入" clearable :min="0"> </el-input>
              </el-form-item>
              <el-form-item label="卡年费">
                <el-input v-model="dataFrom.simAmount" type="number" placeholder="请输入" clearable :min="0">
                </el-input>
              </el-form-item>
            </el-form>
<!--            <el-form ref="form" :model="dataFrom" size="default" label-width="80px" style="margin: 10px">-->
<!--              -->
<!--            </el-form>-->
          </template>
        </el-table>
<!--        <el-table size="default" class="layout-table" border empty-text="卡年费配置">-->
<!--          <template #append>-->
<!--            <el-form ref="form" :model="dataFrom" size="default" label-width="80px" style="margin: 10px">-->
<!--              <el-form-item label="配置价格">-->
<!--                <el-input v-model="dataFrom.simAmount" type="number" placeholder="请输入" clearable :min="0">-->
<!--                </el-input>-->
<!--              </el-form-item>-->
<!--            </el-form>-->
<!--          </template>-->
<!--        </el-table>-->
      </el-col>
    </el-row>
    <template #footer>
      <el-button type="primary" @click="toggleComponents">提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { deviceListPageApi, submitSettingsApi } from '@/api/gps/device'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['refreshDataList'])
const visible = ref(false)
const dataList = ref()
const loading = ref(true)
const total = ref(0)
const data = reactive<any>({
  pageNum: 1,
  pageSize: 10,
  deptId:''
})
const dataFrom = ref({
  imeis: [],
  amount: '',
  simAmount: ''
})
const init = (deptId) => {
  data.deptId = deptId
  visible.value = true
  dataFrom.value = { amount: '', imeis: [], simAmount: '' }
  getExpiredDevices()
}
function getExpiredDevices() {
  loading.value = true
  deviceListPageApi(data).then((ref) => {
    loading.value = false
    dataList.value = ref.data.list
    total.value = ref.data.totalCount
  })
}
function selectionChange(vale) {
  dataFrom.value.imeis = []
  console.log(vale)
  if (vale.length >= 1) {
    dataFrom.value.simAmount = vale[0].simAnnualAmount
    dataFrom.value.amount = vale[0].annualAmount
  }
  vale.forEach((ref) => {
    dataFrom.value.imeis.push(ref.imei)
  })
}

function sizeChangeHandle(val) {
  data.pageNum = 1
  data.pageSize = val
  getExpiredDevices()
}
function currentChangeHandle(val) {
  data.pageNum = val
  getExpiredDevices()
}

function toggleComponents() {
  console.log(dataFrom.value)
  submitSettingsApi(dataFrom.value).then((res) => {
    ElMessage.success({
      message: '操作成功',
      duration: 500,
      onClose: () => {
        visible.value = false
        emit('refreshDataList')
      }
    })
  })
}

defineExpose({
  init
})
</script>
<style>
.display {
  display: flex;
  flex-direction: column;
}
</style>
